<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-button @click="addPersonLevel" size="mini" type="primary" round
          >新增</el-button>
      </el-col>
      <el-col :span="18" class="query-condition">
        <el-select v-model="query.industry" placeholder="行业" class="round-left mr_10">
          <el-option
            v-for="item in industries"
            :key="item.id"
            :label="item.label_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select v-model="query.label" placeholder="岗位" class="mr_10">
          <el-option
            v-for="item in query.labels"
            :key="item.id"
            :label="item.label_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select v-model="query.level" placeholder="等级" class="mr_10">
          <el-option
            v-for="item in levels"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button
          size="mini"
          type="primary"
          class="round-right"
          native-type="button"
          @click="search"
          >搜索</el-button
        >
        <el-button size="mini" round @click="reset">重置</el-button>
      </el-col>
    </el-row>

    <el-table :data="list" stripe>
      <el-table-column prop="industry_name" label="行业" align="center" width="100"></el-table-column>
      <el-table-column prop="label_name" label="岗位" align="center" width="100"></el-table-column>
      <el-table-column prop="job_level_name" label="等级" align="center" width="100"></el-table-column>
      <el-table-column prop="creater_name" label="操作人" align="center" width="100"></el-table-column>
      <el-table-column prop="last_time" label="操作时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-link
            type="info"
            :underline="false"
            class="InfoFont text-success"
            @click="modifyPersonLevel(row)"
            >编辑</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :hide-on-single-page="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <el-dialog
      title="人才等级变更"
      class="el-dialog-personnel-level"
      :visible.sync="showModifyDialog"
      center
      @closed="closeModifyDialog"
      width="40%"
    >
      <el-row :gutter="20">
        <el-col :span="6">姓名: </el-col>
        <el-col :span="18">{{ personnelInfo.staff_name }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">手机号: </el-col>
        <el-col :span="18">{{ personnelInfo.staff_mobile }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><i class="lhadmin lhadmin-wujiaoxing"></i>所属行业:
        </el-col>
        <el-col :span="18">
          <el-select
            @change="onFormIndustryChange"
            size="mini"
            v-model="form.industry"
            placeholder="请选择"
          >
            <el-option
              v-for="item in industries"
              :key="item.id"
              :label="item.label_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><i class="lhadmin lhadmin-wujiaoxing"></i>岗位:
        </el-col>
        <el-col :span="18">
          <el-select size="mini" v-model="form.label" placeholder="请选择">
            <el-option
              v-for="item in form.labels"
              :key="item.id"
              :label="item.label_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"
          ><i class="lhadmin lhadmin-wujiaoxing"></i>等级:
        </el-col>
        <el-col :span="18">
          <el-select size="mini" v-model="form.level" placeholder="请选择">
            <el-option
              v-for="item in levels"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><span class="opacity-0">说明</span></el-col>
        <el-col :span="18"
          ><em class="tips">*青铜级为最低等级，越往上等级越高</em></el-col
        >
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showModifyDialog = false">取 消</el-button>
        <el-button type="primary" @click="savePersonNewLevel">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchPersonnelLevelList,
  createUserLevel,
  updateUserLevel,
  fetchUserLevelList,
} from "@/api/staff";
import { fetchIndustryJob } from "@/api/label";
import { orderBy } from "lodash";

const PAGE_SIZE = 10;
export default {
  name: "PersonnelLevelList",
   props: {
    userInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      query: {
        // 默认外层搜索表单
        industry: "",
        label: "",
        level: "",
        labels: [],
      },
      form: {
        // 添加/修改用户岗位等级表单
        id: "",
        industry: "",
        level: "",
        label: "",
        labels: [],
      },
      levels: [], // 等级列表
      industries: [], // 行业列表
      personnelInfo: {}, // 用户个人信息
      showModifyDialog: false,
      pageSize: PAGE_SIZE,
      page: 1,
      total: 0,
      list: [], // 当前用户的岗位等级列表
    };
  },
  created() {
    const { 
      staff_sn,
      name,
      mobile,
      city_id,
      city
    } = this.userInfo
    this.personnelInfo = {
      staff_sn,
      city_id,
      city_name: city,
      staff_name: name,
      staff_mobile: mobile
    };
    this.fetchList();
    this.getIndustryJob(city_id);
    this.getLevelList();
  },
  watch: {
    "query.industry": {
      handler(val) {
        this.query.label = "";
        this.query.labels = '';
        if(val){
          const item = this.industries.find((item) => item.id === val);
          this.query.labels = item.children;
        }
      },
      deep: true,
    },
  },
  methods: {
    // 行业 岗位筛选范围列表
    async getIndustryJob(city_id) {
      try {
        this.industries = await fetchIndustryJob({ city_id });
      } catch (err) {}
    },
    // 等级筛选范围列表
    async getLevelList() {
      try {
        const levels = await fetchUserLevelList({});
        this.levels = orderBy(levels, ["id"], ["desc"]);
      } catch (err) {}
    },

    // 获取当前人才的岗位等级列表
    async fetchList(params = {}) {
      try {
        const ret = await fetchPersonnelLevelList({
          staff_sn: this.personnelInfo.staff_sn,
          page: this.page,
          pageSize: this.pageSize,
          industry: this.query.industry,
          label_id: this.query.label,
          job_level: this.query.level,
          ...params,
        });
        this.total = ret.count;
        this.list = ret.list;
      } catch (err) {
        this.$message({
          message: "获取当前人才的等级列表数据失败",
          type: "error",
        });
      }
    },
    search() {
      this.page = 1;
      this.fetchList();
    },
    reset() {
      this.page = 1;
      this.pageSize = PAGE_SIZE;
      this.query = {
        industry: "",
        label: "",
        level: ""
      };

      this.$nextTick(() => {
        this.fetchList();
      });
    },
    // 新增人才等级
    addPersonLevel() {
      this.showModifyDialog = true;
    },
    // 监听
    onFormIndustryChange(val) {
      const item = this.industries.find((item) => item.id === val);
      this.form.label = "";
      this.form.labels = item.children;
    },
    // 修改人才等级
    modifyPersonLevel(row) {
      const industryItem = this.industries.find(
        (item) => item.id === row.industry
      );
      this.form = {
        id: row.id,
        industry: row.industry,
        level: row.job_level,
        label: row.label_id,
        labels: industryItem.children || [],
      };
      this.showModifyDialog = true;
    },
    async savePersonNewLevel() {
      try {
        const { industry, label, level } = this.form;

        if (!industry) {
          return this.$message.error("请选择行业");
        }

        if (!label) {
          return this.$message.error("请选择岗位");
        }

        if (!level) {
          return this.$message.error("请选择级别");
        }

        const label_item = this.form.labels.find(
          (item) => item.id === this.form.label
        );

        // 修改
        if (this.form.id) {
          await updateUserLevel({
            id: this.form.id,
            job_level: this.form.level,
            label_id: this.form.label,
            label_name: label_item.label_name,
            industry: this.form.industry,
          });
        }
        // 新增
        else {
          await createUserLevel({
            industry: this.form.industry,
            label_id: this.form.label,
            label_name: label_item.label_name,
            job_level: this.form.level,
            staff_sn: this.personnelInfo.staff_sn,
          });
        }

        this.$message({
          message: this.form.id ? "修改成功" : "添加成功",
          type: "success",
        });

        this.showModifyDialog = false;

        this.fetchList();
      } catch (err) {}
    },
    // 关闭人才等级变更弹层
    closeModifyDialog() {
      this.form = {
        id: "",
        industry: "",
        level: "",
        label: "",
      };
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.fetchList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchList();
    },
  },
};
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 10px;
  .el-select,
  .el-date-picker,
  .el-input {
    width: 120px;
  }
}
.el-col {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}

.el-dialog-personnel-level {
  .el-select,
  .el-date-picker,
  .el-input {
    width: 220px;
  }
}
.tips {
  color: #d9001b;
  font-style: normal;
}
.opacity-0 {
  opacity: 0;
}

>>> .round-left .el-input__inner{
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/components/JobLevel.vue